<template>
  <van-header title="歌手" left-arrow></van-header>
  <div class="loading" v-if="singerList.length == 0">
    <van-loading size="24px" vertical>加载中...</van-loading>
  </div>
  <div class="section" v-else>
    <van-my-tab :list="tab" @handleChangeContent="handleChangeContent"></van-my-tab>
    <van-list>
      <van-cell v-for="(item, index) in singerList" :key="item.id" center>
        <template #icon>
          <img v-lazy="item.picUrl" alt="" @click="handleClick(item)" />
        </template>
        <template #title>
          <p class="author">{{ item.name }}</p>
          <p class="topic">话题{{ getPlayCount(item.topicPerson) }}</p>
        </template>
        <template #right-icon>
          <van-button icon="plus" color="#ec4141" size="mini" round>关注</van-button>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import VanHeader from '@/components/header/Header.vue';
import VanMyTab from '@/components/tabs/Tab.vue';
import { useMyRouters } from '@/router';
import { getToplistArtist } from '@/api/wangyi/singer';
import singers from '../../api/mock/singers.json';

import { getPlayCount } from '../../util';

const { router } = useMyRouters();
const tab = ref([
  {
    id: 1,
    name: '华语'
  },
  {
    id: 2,
    name: '欧美'
  },
  {
    id: 3,
    name: '韩国'
  },
  {
    id: 4,
    name: '日本'
  }
]);

const singerList = ref(singers.list.artists);

function handleChangeContent(item) {
  console.log(item);
  getToplistArtist(item.id).then(res => {
    console.log(res);
    singerList.value = res.list.artists;
  });
}

// 跳转到详情页
function handleClick(item) {
  router.push({
    path: '/singerdetail',
    query: {
      id: item.id
    }
  });
}
</script>

<style lang="less" scoped>
.section {
  padding: 12px;
}
.van-list {
  .van-cell {
    padding: 0;
    margin-bottom: 10px;
    background: #f8f8f8;
    border-radius: 10px;
    overflow: hidden;
    img {
      width: 60px;
      height: 60px;
      padding-right: 10px;
    }
    .van-cell__title {
      .author {
        font-size: 16px;
        font-weight: bolder;
      }
      .topic {
        color: #808080;
      }
    }
    button {
      padding-right: 8px;
      margin-right: 15px;
    }
  }
}
</style>
